import { Link } from "@remix-run/react";
import { Menu } from "lucide-react";
import { useState } from 'react'

const title = "宅绘云坊"

const Logo = () => (
    <svg viewBox="0 0 300 50" className="h-8">
        <defs>
            <linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" style={{ stopColor: '#34D399', stopOpacity: 1 }} />
                <stop offset="100%" style={{ stopColor: '#059669', stopOpacity: 1 }} />
            </linearGradient>
        </defs>
        <path d="M40 35L25 20L10 35V45H40V35Z" fill="url(#logoGradient)" />
        <path d="M25 15L5 35H45L25 15Z" fill="url(#logoGradient)" opacity="0.7" />
        <circle cx="20" cy="30" r="2" fill="#059669" />
        <circle cx="30" cy="30" r="2" fill="#059669" />
        <circle cx="25" cy="25" r="2" fill="#059669" />
        <line x1="20" y1="30" x2="25" y2="25" stroke="#059669" strokeWidth="1" />
        <line x1="30" y1="30" x2="25" y2="25" stroke="#059669" strokeWidth="1" />
        <text x="55" y="42" fill="#059669" fontFamily="Arial" fontSize="38" fontWeight="bold">{title}</text>
    </svg>
);

const Header = () => {
    const [isOpen, setIsOpen] = useState(false);

    return (
        <nav className="bg-white shadow-sm">
            <div className="px-4 sm:px-6 lg:px-8">
                <div className="flex justify-between items-center h-16">
                    <Link to="/" className="flex items-center">
                        <Logo />
                    </Link>

                    {/* Desktop Menu */}
                    <div className="flex items-center space-x-8 ">
                        <div className="w-10 h-10 rounded-full overflow-hidden">
                            <img src="/images/slogan.jpg" alt="用户头像" className="w-full h-full object-cover" />
                        </div>
                        {/* <Link to="/features/t2i" className="text-emerald-700 hover:text-emerald-500 font-medium"><span>文生图</span></Link>
                        <Link to="/features/i2i" className="text-emerald-700 hover:text-emerald-500 font-medium"><span>图生图</span></Link> */}
                    </div>

                    {/* Mobile Menu Button */}
                    {/* <div className="md:hidden flex items-center">
                        <button
                            onClick={() => setIsOpen(!isOpen)}
                            className="text-emerald-700 hover:text-emerald-500"
                        >
                            <Menu className="h-6 w-6" />
                        </button>
                    </div> */}
                </div>

                {/* Mobile Menu */}
                {/* {isOpen && (
                    <div className="md:hidden">
                        <div className="pt-2 pb-3 space-y-1">
                            <Link to="/features/t2i" className="block px-3 py-2 text-emerald-700 hover:bg-emerald-50 hover:text-emerald-500">文生图</Link>
                            <Link to="/features/i2i" className="block px-3 py-2 text-emerald-700 hover:bg-emerald-50 hover:text-emerald-500">图生图</Link>
                        </div>
                    </div>
                )} */}
            </div>
        </nav>
    );
};

export default Header
